<template>
  <page-header-wrapper>
    <a-result title="该功能暂未开放" @click="notopened" style="padding-top: 120px">
      <template #extra>
      </template>
    </a-result>
    <div style="display:none">
      <!-- <div style="z-index: 999;display:flex;height:80%;width:100%;position:absolute;background-color:transparent;opacity:1;cursor:not-allowed;"></div> -->
      <a-card :bordered="false">
        <a-icon type="menu-fold" @click="turnSmall" class="turnSmall" v-if="treespan===4"></a-icon>
        <a-icon type="menu-unfold" @click="turnSmall" class="turnSmall" v-if="treespan===0"/>
        <a-row :gutter="13">
          <a-col :span="treespan">
            <a-skeleton active :paragraph="{ rows: 5 }" :loading="menuLoading" />
            <s-tree
              :dataSource="orgTree"
              :openKeys.sync="openKeys"
              :search="false"
              @click="handleClick"
              @titleClick="handleTitleClick"
              :selectKey="openKeys">
            </s-tree>
          </a-col>
          <a-col :span="tablespan">
            <!-- <a-skeleton active :paragraph="{ rows: 5 }" :loading="menuLoading" /> -->
            <a-button type="primary" v-if="!menuLoading" style="margin-bottom:10px" @click="handleAdd">新增</a-button>
            <a-table
              ref="table"
              size="default"
              :loading="loading"
              :columns="columns"
              :row-key="record =>record.project_id"
              :data-source="dataSource"
              :alert="false"
              :pagination="pagination"
              @change="handlePageChange"
              :maskClosable="false"
            >
              <div
                slot="filterDropdown"
                slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
                style="padding: 8px"
              >
                <a-input
                  v-ant-ref="c => (searchInput = c)"
                  :placeholder="`搜索 ${column.dataIndex}`"
                  :value="selectedKeys[0]"
                  style="width: 188px; margin-bottom: 8px; display: block;"
                  @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                  @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
                />
                <a-button
                  type="primary"
                  icon="search"
                  size="small"
                  style="width: 90px; margin-right: 8px"
                  @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
                >
                  搜索
                </a-button>
                <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
                  重置
                </a-button>
              </div>
              <a-icon
                slot="filterIcon"
                slot-scope="filtered"
                type="search"
                :style="{ color: filtered ? '#108ee9' : undefined }"
              />
              <template slot="customRender" slot-scope="text, record, index, column">
                <span v-if="searchText && searchedColumn === column.dataIndex">
                  <template
                    v-for="(fragment, i) in text
                      .toString()
                      .split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
                  >
                    <mark
                      v-if="fragment.toLowerCase() === searchText.toLowerCase()"
                      :key="i"
                      class="highlight"
                    >{{ fragment }}</mark
                    >
                    <template v-else>{{ fragment }}</template>
                  </template>
                </span>
                <template v-else>
                  {{ text }}
                </template>
              </template>
              <span slot="action" slot-scope="text, record">
                <a href="javascript:;" @click="handleModalData(record,0)" v-if="record.project_status==0||record.project_status==3">修改</a>
                <a href="javascript:;" @click="handleModalData(record,1)" v-else>详情</a>
                <a-divider type="vertical"></a-divider >
                <a-popconfirm
                  v-if="record.project_status==0||record.project_status==3"
                  title="确定操作?"
                  okText="确定"
                  cancelText="取消"
                  @confirm="() => statusChange(record,1)"
                >
                  <a href="javascript:;">申报</a>
                </a-popconfirm>
                <a href="javascript:;" disabled="true" v-else>申报</a>
                <a-divider type="vertical"></a-divider>
                <a-popconfirm
                  v-if="record.project_status==0||record.project_status==1"
                  title="确定操作?"
                  okText="确定"
                  cancelText="取消"
                  @confirm="() => statusChange(record,0)"
                >
                  <a href="javascript:;">删除</a>
                </a-popconfirm>
                <a href="javascript:;" disabled="true" v-else>删除</a>
              </span>
              <span slot="project_status" slot-scope="project_status">
                <a-tag color="orange" v-if="project_status==0">未申报</a-tag>
                <a-tag color="blue" v-if="project_status==1">待受理</a-tag>
                <a-tag color="red" v-if="project_status==3">已退回</a-tag>
                <a-tag color="green" v-if="project_status==2">已受理</a-tag>
                <a-tag color="pink" v-if="project_status==4">待评审</a-tag>
              </span>
            </a-table>
          </a-col>
        </a-row>
        <a-modal
          :visible="visible"
          @cancel="handleModalClose()"
          title="新增"
          :confirm-loading="confirmLoading"
          okText="保存"
          cancelText="取消"
          width="62%"
          v-if="visible"
          :maskClosable="false"
        >
          <!-- <a-skeleton active :paragraph="{ rows: 8 }" :loading="detailLoading" /> -->
          <a-form-model
            ref="showData"
            :label-col="{span: 5}"
            :wrapper-col="{span: 18}"
            :model="showData"
            :rules="rules"
          >
            <div class="pro">
              <a-form-model-item label="工程名称" prop="project_name">
                <a-input :disabled="declare_save" v-model="showData.project_name" ></a-input>
              </a-form-model-item> 
            </div>
            <div class="pru">
              <a-form-model-item label="镇区" prop="town_name" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                <a-select :disabled="declare_save" placeholder="请选择区域" v-model="showData.town_name">
                  <a-select-option value="1">1</a-select-option>
                  <a-select-option value="2">2</a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="街村" prop="street_name" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                <a-input :disabled="declare_save" v-model="showData.street_name" ></a-input>
              </a-form-model-item>
            </div>
            <div class="pro">
              <a-form-model-item label="详细地址" prop="detailed_address">
                <a-input v-model="showData.detailed_address" placeholder="暂无需填写本项内容" :disabled="true"></a-input>
              </a-form-model-item>
            </div>
            <div class="pro">
              <a-form-model-item label="申报日期" prop="declaration_date">
                <a-date-picker :disabled="declare_save" v-model="showData.declaration_date"/>
              </a-form-model-item>
            </div>
            <div class="pro">
              <a-form-model-item label="建造师注册证号" prop="constructor_registration_no">
                <a-input :disabled="declare_save" v-model="showData.constructor_registration_no" ></a-input>
              </a-form-model-item>
            </div>
            <div class="pro">
              <a-form-model-item label="建筑单位（申报）" prop="contractor">
                <a-input :disabled="declare_save" v-model="showData.contractor" ></a-input>
              </a-form-model-item>
            </div>
            <div class="pru">
              <a-form-model-item label="联系人" prop="contacts_name" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                <a-input :disabled="declare_save" v-model="showData.contacts_name" ></a-input>
              </a-form-model-item>
              <a-form-model-item label="联系电话" prop="contact_number" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                <a-input :disabled="declare_save" v-model="showData.contact_number" ></a-input>
              </a-form-model-item></div>
            <div class="pro">
              <a-form-model-item label="建造师(项目经理)姓名)" prop="panager_name">
                <a-input :disabled="declare_save" v-model="showData.panager_name" ></a-input>
              </a-form-model-item>
            </div>
            <div class="pro">
              <a-form-model-item label="参建单位" prop="participating_units">
                <a-input :disabled="declare_save" v-model="showData.participating_units" ></a-input>
              </a-form-model-item>
            </div>
            <div class="pro">
              <a-form-model-item label="监理单位" prop="construction_control_unit">
                <a-input :disabled="declare_save" v-model="showData.construction_control_unit" ></a-input>
              </a-form-model-item>
            </div>
            <div class="pro">
              <a-form-model-item label="项目总监姓名" prop="chief_inspector_name">
                <a-input :disabled="declare_save" v-model="showData.chief_inspector_name" ></a-input>
              </a-form-model-item>
            </div>
            <div class="pro">
              <a-form-model-item label="勘察单位" prop="survey_unit">
                <a-input :disabled="declare_save" v-model="showData.survey_unit" ></a-input>
              </a-form-model-item>
            </div>
            <div class="pro">
              <a-form-model-item label="监设计单位" prop="desgin_unit">
                <a-input :disabled="declare_save" v-model="showData.desgin_unit" ></a-input>
              </a-form-model-item>
            </div>
            <div class="pru">
              <a-form-model-item label="监理单位联系人" prop="unit_contact" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                <a-input :disabled="declare_save" v-model="showData.unit_contact" ></a-input>
              </a-form-model-item>
              <a-form-model-item label="联系电话" prop="unit_contact_phone" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                <a-input :disabled="declare_save" v-model="showData.unit_contact_phone" ></a-input>
              </a-form-model-item>
            </div>
            <div class="pru">
              <a-form-model-item label="面积（平方）" prop="area" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                <a-input :disabled="declare_save" v-model="showData.area" ></a-input>
              </a-form-model-item>
              <a-form-model-item label="规模（万元）" prop="scale" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                <a-input :disabled="declare_save" v-model="showData.scale" ></a-input>
              </a-form-model-item>
            </div>
            <div class="pru">
              <a-form-model-item label="结构" prop="structure" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                <a-select :disabled="declare_save" model="showData.structure">
                  <a-select-option value="1">1</a-select-option>
                  <a-select-option value="2">2</a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="基础类型" prop="basics_type" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                <a-input :disabled="declare_save" v-model="showData.basics_type" ></a-input>
              </a-form-model-item>
            </div>
            <div class="pru">
              <a-form-model-item label="地上" prop="ground" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                <a-input :disabled="declare_save" v-model="showData.ground" ></a-input>
              </a-form-model-item>
              <a-form-model-item label="地下" prop="underground" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                <a-input :disabled="declare_save" v-model="showData.underground" ></a-input>
              </a-form-model-item>
            </div>
            <div class="pro">
              <a-form-model-item label="开工日期" prop="start_time">
                <a-date-picker :disabled="declare_save" v-model="showData.start_time"/>
              </a-form-model-item>
            </div>
            <div class="pru">
              <a-form-model-item label="竣工验收" prop="finish_time" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                <a-date-picker :disabled="declare_save" v-model="showData.finish_time"/>
              </a-form-model-item>
              <a-form-model-item label="备案时间" prop="filing_time" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                <a-date-picker :disabled="declare_save" v-model="showData.filing_time"/>
              </a-form-model-item>
            </div>
            <div class="pro">
              <a-form-model-item label="备注" prop="remarks">
                <a-input :disabled="declare_save" v-model="showData.remarks" ></a-input>
              </a-form-model-item>
            </div>
            <p class="warn">(注意：上传文件为jpg,gif,png格式，允许文件名含中文符)</p>
            <!-- 上传文件部分 -->
            <!-- :rules="[{ required: true, message: '图片不可为空', trigger: 'change'}]" -->
            <a-form-model-item label="验收报告" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
              <a-upload
                :file-list="showData.file_one"
                :remove="handleRemove_one"
                :before-upload="beforeUploadmy"
                @preview="handlePreview"
                name="file"
                list-type="picture-card"
                @change="handleChange"
                :custom-request="(data) => {handleUploadmy(data,1)}"
              >
                <a-button> <a-icon type="plus" /> 选择图片 </a-button>
              </a-upload>
            </a-form-model-item>
            <a-form-model-item label="监督报告" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
              <a-upload
                :file-list="showData.file_two"
                :remove="handleRemove_two"
                :before-upload="beforeUploadmy"
                @preview="handlePreview"
                name="file"
                list-type="picture-card"
                @change="handleChange"
                :custom-request="(data) => {handleUploadmy(data,2)}"
              >
                <a-button> <a-icon type="plus" /> 选择图片 </a-button>
              </a-upload>
            </a-form-model-item>
            <a-form-model-item label="备案证" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
              <a-upload
                :file-list="showData.file_there"
                :remove="handleRemove_there"
                :before-upload="beforeUploadmy"
                @preview="handlePreview"
                name="file"
                list-type="picture-card"
                @change="handleChange"
                :custom-request="(data) => {handleUploadmy(data,3)}"
              >
                <a-button> <a-icon type="plus" /> 选择图片 </a-button>
              </a-upload>
            </a-form-model-item>
            <a-form-model-item label="申报表" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
              <a-upload
                :file-list="showData.file_four"
                :remove="handleRemove_four"
                :before-upload="beforeUploadmy"
                @preview="handlePreview"
                name="file"
                list-type="picture-card"
                @change="handleChange"
                :custom-request="(data) => {handleUploadmy(data,4)}"
              >
                <a-button> <a-icon type="plus" /> 选择图片 </a-button>
              </a-upload>
            </a-form-model-item>
          </a-form-model>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancelimg">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
          <template slot="footer">
            <Button type="button" class="ant-btn ant-btn-primary" @click="handleModalOk" :disabled="declare_aave">保存</Button>
            <Button type="button" class="ant-btn" @click="handleModalClose">取消</Button>
          </template>
        </a-modal>
      </a-card>
    </div>
  </page-header-wrapper>
</template>

<script>
import {moment} from 'moment'
import STree from '@/components/Tree/Tree'
import { STable } from '@/components'
import OrgModal from '../other/modules/OrgModal'
// import { getServiceList } from '@/api/manage'
// eslint-disable-next-line no-unused-vars
import { menuFinds, getValue, detailEdit, addLabel, addData, projectStatus, askTable, addForm } from '@/api/mobileReview'
import { uploadImages } from '@/api/upload'
// import { registerUpload } from '@/api/upload'
// import { Form } from 'ant-design-vue'

export default {
  name: 'TreeList',
  components: {
    STable,
    STree,
    OrgModal
  },
  data () {
    return {
      key: 1,
      originalData: [],
      uploading: false, // 上传文件按钮loading
      previewVisible: false, // 图片预览模态框可见
      previewImage: '', // 图片预览Src
      modalStatus: 0, // 状态为0时为新增，为1时为修改
      menuLoading: true,
      fileList: [], // 上传的文件
      searchText: '',
      detailLoading: true,
      // showData: { domains: [], projectId: Number },
      showData: { file_one: [], file_two:[], file_there:[], file_four:[], domains: [], projectId: Number },
      confirmLoading: false,
      declare_save:false,
      declare_aave:false,
      // defaultSelectKey: [], // menu默认选中项
      visible: false,
      projectTypeId: 1,
      loading: true,
      openKeys: [1],
      treespan: 4,
      tablespan: 20,
      dataSource: [],
      pagination: {
        pageSize: 10,
        current: 1,
        total: 0,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '30', '50']
      },
      // 添加表单规则
      rules: {
        project_name: [
           { required: true, message: '请输入工程名称', trigger: 'blur' }
        ],
        constructor_registration_no: [
          { required: true, message: '内容不可为空', trigger: 'blur' },
          { min: 18, max: 18, message: '长度在 18 个字符' }
        ],
        street_name: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        contractor: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        contact_number: [
          { required: true, message: '内容不可为空', trigger: 'blur' },
          { min: 7, max: 15, message: '长度在 7~15 个字符' }
        ],
        contacts_name: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        panager_name: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        participating_units: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        construction_control_unit: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        chief_inspector_name: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        survey_unit: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        desgin_unit: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        unit_contact_phone: [
          { required: true, message: '内容不可为空', trigger: 'blur' },
          { min: 7, max: 15, message: '长度在 7~15 个字符' }
        ],
        area: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        scale: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        basics_type: [
            { required: true, message: '内容不可为空', trigger: 'blur' }
          ],
        ground: [
            { required: true, message: '内容不可为空', trigger: 'blur' }
          ],
        underground: [
          { required: true, message: '内容不可为空', trigger: 'blur'}
        ],
        unit_contact: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        remarks: [
          { required: true, message: '内容不可为空', trigger: 'blur'}
        ]
        },
      // 查询参数
      queryParam: new FormData(),
      // 表头
      columns: [],
      // 加载数据方法 必须为 Promise 对象
      // loadData: parameter => {
      //   var formdata = new FormData()
      //   formdata.append('project_type_id', this.projectTypeId)
      //   formdata.append('project_status', 0)
      //   return workInfoTableHeader(formdata)
      //     .then(res => {
      //       console.log(parameter)
      //       this.columns = res.result.headList
      //       return res.result.data
      //     })
      // },
      orgTree: [],
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  created () {
    this.getMenuInfo()
  },
  methods: {
    moment,
    handlePreview (file) {
      this.previewImage = file.url
      this.previewVisible = true
    },
    // 图片预览模态框
    handleCancelimg () {
      this.previewVisible = false
    },
    handleChange (file) {
      // this.fileListmy = fileList
      console.log(file)
    },
    // 上传图片Remove
    handleRemove_one (file) {
      const index = this.showData.file_one.indexOf(file)
      const newFileList = this.showData.file_one.slice()
      newFileList.splice(index, 1)
      this.showData.file_one = newFileList
    },
    handleRemove_two (file) {
      const index = this.showData.file_two.indexOf(file)
      const newFileList = this.showData.file_two.slice()
      newFileList.splice(index, 1)
      this.showData.file_two = newFileList
    },
    handleRemove_there (file) {
      const index = this.showData.file_there.indexOf(file)
      const newFileList = this.showData.file_there.slice()
      newFileList.splice(index, 1)
      this.showData.file_there = newFileList
    },
    handleRemove_four (file) {
      const index = this.showData.file_four.indexOf(file)
      const newFileList = this.showData.file_four.slice()
      newFileList.splice(index, 1)
      this.showData.file_four = newFileList
    },
    // 上传图片before
    beforeUploadmy (file) {
      console.log(file)
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!')
      }
      return isJpgOrPng && isLt2M
    },
    // 覆盖原有上传方法，自定义上传
     handleUploadmy (data, value) {
      console.log(data, value)
      const file = {
        uid: '1',
        // thumbUrl: res.result[0].url,
        name: '1',
        status: 'uploading',
        url: ''
      }
      var fd = new FormData()
      fd.append('file[0]', data.file)
      uploadImages(fd).then(res => {
        if (res.code === 200) {
          this.$notification.success({
            message: '上传成功'
          })
          file.uid = res.result[0].file_id
          file.name = res.result[0].file_id
          file.status = 'done'
          file.url = res.result[0].url
          file.file_id = res.result[0].file_id
          if (value === 1) {
            this.showData.file_one.push(file)
            console.log(this.showData.file_one)
          } else if (value === 2) {
            this.showData.file_two.push(file)
            console.log(this.showData.file_two)
          } else if (value === 3) {
            this.showData.file_there.push(file)
            console.log(this.showData.file_there)
          } else if (value === 4) {
            this.showData.file_four.push(file)
            console.log(this.showData.file_four)
          }
        } else {
          this.$notification.error({
            message: res.code,
            description: res.message
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: err.code,
          description: err.message
        })
        console.log(err)
      })
    },
    // 左侧树点击
    handleClick (e) {
      console.log(e)
      this.projectTypeId = e.key
      this.key = this.projectTypeId
      console.log(this.key)
      // this.$refs.table.refresh(true)
      this.getTableData()
    },
    // handleAdd (item) {
    //   console.log('add button, item', item)
    //   this.$message.info(`提示：你点了 ${item.key} - ${item.title} `)
    //   this.$refs.modal.add(item.key)
    // },
    handleTitleClick (item) {
      console.log('handleTitleClick', item)
    },
    titleClick (e) {
      console.log('titleClick', e)
    },
    getChange () {

    },
    // 获取左侧树状信息
    getMenuInfo () {
      // this.loading = true
      this.menuLoading = true
      menuFinds().then(res => {
        this.orgTree = res.result
        // function SonObj (title, key) {
        //   this.title = title
        //   this.key = key
        // }
        // // 获取menu后表格默认显示第一个menu的数据
        this.projectTypeId = this.orgTree[0].key
        this.openKeys[0] = this.orgTree[0].key
        console.log(this.projectTypeId)
        this.getTableData()
        this.menuLoading = false
        // this.loading = false
      })
    },
    // 列搜索
    handleSearch (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
    },
    // 列搜索重置
    handleReset (clearFilters) {
      clearFilters()
      this.searchText = ''
    },
    // 对动态请求到的表头数组遍历插入列搜索相关slot及函数 详见ant design vue文档
    headerPush (data) {
      if (data === undefined) {
        console.log('数组为空')
      } else {
          data.forEach(item => {
          item['scopedSlots'] = { filterDropdown: 'filterDropdown', filterIcon: 'filterIcon', customRender: 'customRender' }
          item['onFilter'] = (value, record) =>
              record[item.dataIndex]
                .toString()
                .toLowerCase()
                .includes(value.toLowerCase())
          item['onFilterDropdownVisibleChange'] = visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              }, 0)
            }
          }
        })
      }
    },
    // 获取表头及数据
    getTableData () {
      this.loading = true
      var formdata = new FormData()
      formdata.append('project_type_id', this.projectTypeId)
      console.log(formdata.get('project_type_id'))
      askTable(formdata).then(res => {
        this.columns = res.result.headList
        this.headerPush(this.columns)
        this.columns.push({ title: '状态', dataIndex: 'project_status', scopedSlots: { customRender: 'project_status' }, key: 'project_status' })
        this.columns.push({ title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' }, key: 'action', fixed: 'right' })
        this.columns.unshift({ title: '序号', dataIndex: 'index', customRender: (text, record, index) => `${index + 1}`, key: 'index' })
        this.originalData = res.result.data.data
        this.dataSource = res.result.data.data
        this.pagination.total = res.result.data.total
        this.loading = false
      })
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    // 左侧树状菜单收缩
    turnSmall () {
      this.tablespan === 20 ? this.tablespan = 24 : this.tablespan = 20
      this.treespan === 0 ? this.treespan = 4 : this.treespan = 0
    },
    // 点击详情时获取模态框信息
    handleModalData (record, status) {
      console.log(record,status)
      this.modalStatus = 1
      // this.showData = JSON.parse(JSON.stringify(record))
      // status === 0 ? this.visible = true
      this.visible = true
      if (status === 0) {
        this.declare_save = false
        this.declare_aave = true
      } 
      else {
        this.declare_save = true
        this.declare_aave = true
      }
      // console.log(record)
      var fd = new FormData()
      fd.append('project_id', record.project_id)
      getValue(fd).then(res => {
        // this.showData.domains = res.result[0]
        this.showData = JSON.parse(JSON.stringify(res.result[0]))
        this.showData.projectId = record.project_id
        console.log(this.showData)
      })
    },
    // 点击新增时获取模态框信息
    handleAdd () {
      this.modalStatus = 0
      console.log(123)
      this.visible = true
      this.detailLoading = true
      // 这里的projectTypeId是申报台账的类型，市优质奖，示范工地
      var fd = new FormData()
      fd.append('project_type_id', this.projectTypeId)
      console.log(fd)
      addLabel(fd).then(res => {
        var data = res.result
        console.log(data)
        // 新增是disabled全为false
        data.forEach(item => {
          item['disabled'] = false
          // eslint-disable-next-line eqeqeq
          if (item.type_id == 3) {
            item.value = []
          }
        })
        this.showData.domains = data
        this.detailLoading = false
      })
    },
    handleModalClose () {
      this.visible = false
      this.declare_aave = false
      this.declare_save = false
      this.showData.domains = []
      this.showData = {}
      this.fileList = []
    },
    // 模态框保存
    handleModalOk () {
      // var formdataagrument = new FormData()
      // formdataagrument.append('project_type_id', this.projectTypeId)
      // formdataagrument.append('project_name', this.showData.project_name)
      // formdataagrument.append('town_name', this.showData.town_name)
      // formdataagrument.append('street_name', this.showData.street_name)
      // formdataagrument.append('detailed_address', this.showData.detailed_address)
      // formdataagrument.append('declaration_date', (new Date(this.showData.declaration_date)).getTime() / 1000)
      // formdataagrument.append('constructor_registration_no', this.showData.constructor_registration_no)
      // formdataagrument.append('contractor', this.showData.contractor)
      // formdataagrument.append('contacts_name', this.showData.contacts_name)
      // formdataagrument.append('contact_number', this.showData.contact_number)
      // formdataagrument.append('panager_name', this.showData.panager_name)
      // formdataagrument.append('participating_units', this.showData.participating_units)
      // formdataagrument.append('construction_control_unit', this.showData.construction_control_unit)
      // formdataagrument.append('chief_inspector_name', this.showData.chief_inspector_name)
      // formdataagrument.append('survey_unit', this.showData.survey_unit)
      // formdataagrument.append('desgin_unit', this.showData.desgin_unit)
      // formdataagrument.append('unit_contact', this.showData.unit_contact)
      // formdataagrument.append('unit_contact_phone', this.showData.unit_contact_phone)
      // formdataagrument.append('area', this.showData.area)
      // formdataagrument.append('scale', this.showData.scale)
      // formdataagrument.append('structure', this.showData.structure)
      // formdataagrument.append('basics_type', this.showData.basics_type)
      // formdataagrument.append('ground', this.showData.ground)
      // formdataagrument.append('underground', this.showData.underground)
      // formdataagrument.append('start_time', (new Date(this.showData.start_time)).getTime() / 1000)
      // formdataagrument.append('finish_time', (new Date(this.showData.finish_time)).getTime() / 1000)
      // formdataagrument.append('filing_time', (new Date(this.showData.filing_time)).getTime() / 1000)
      // formdataagrument.append('remarks', this.showData.remarks)
      var formdataagrument = {
        'project_type_id': this.projectTypeId,
        'project_name': this.showData.project_name,
        'town_name': this.showData.town_name,
        'street_name': this.showData.street_name,
        'detailed_address': this.showData.detailed_address,
        'declaration_date': (new Date(this.showData.declaration_date)).getTime() / 1000,
        'constructor_registration_no': this.showData.constructor_registration_no,
        'contractor': this.showData.contractor,
        'contacts_name': this.showData.contacts_name,
        'contact_number': this.showData.contact_number,
        'panager_name': this.showData.panager_name,
        'participating_units': this.showData.participating_units,
        'construction_control_unit': this.showData.construction_control_unit,
        'chief_inspector_name': this.showData.chief_inspector_name,
        'survey_unit': this.showData.survey_unit,
        'desgin_unit': this.showData.desgin_unit,
        'unit_contact': this.showData.unit_contact,
        'unit_contact_phone': this.showData.unit_contact_phone,
        'area': this.showData.area,
        'scale': this.showData.scale,
        'structure': this.showData.structure,
        'basics_type': this.showData.basics_type,
        'ground': this.showData.ground,
        'underground': this.showData.underground,
        'start_time': (new Date(this.showData.start_time)).getTime() / 1000,
        'finish_time': (new Date(this.showData.finish_time)).getTime() / 1000,
        'filing_time': (new Date(this.showData.filing_time)).getTime() / 1000,
        'remarks': this.showData.remarks,
        'check_file': this.showData.file_one,
        'supervise_file': this.showData.file_two,
        'filing_file': this.showData.file_there,
        'daclare_file': this.showData.file_four
      }
      if (this.modalStatus === 1) {
        this.confirmLoading = true
        var request = {
          'project_id': this.showData.projectId,
          'valueList': this.showData.domains
        }
        detailEdit(request).then(res => {
          this.confirmLoading = false
          this.$notification.success({
          title: '成功',
          message: res.message
        })
          this.getTableData()
          this.handleModalClose()
        }).catch(err => {
          this.$notification.error({
          title: '失败',
          message: err.message
        })
          this.confirmLoading = false
        })
     } else {
        this.confirmLoading = true
        addForm(formdataagrument).then(res => {
          this.$notification.success({
          title: '成功',
          message: '新增成功'
        })
        this.confirmLoading = false
        this.getTableData()
        this.handleModalClose()
      }).catch(err => {
          this.$notification.error({
          title: '失败',
          message: err.message
        })
          this.confirmLoading = false
        })
    }
  },
    // 审核及删除 参数0为删除 1为审核
    statusChange (record, status) {
      if (status === 1) {
        var fd = new FormData()
        fd.append('project_id', record.project_id)
        fd.append('project_status', 1)
        projectStatus(fd).then(res => {
          this.$success({
            title: '申报成功',
            // JSX support
            content: (
              <div>
                <p>您已成功申报</p>
              </div>
            )
          })
          this.getTableData()
        })
        .catch(err => {
          this.$notification.error({
            title: err.code,
            message: err.message
          })
        })
      } else {
        var formdata = new FormData()
        formdata.append('project_id', record.project_id)
        formdata.append('is_delete', 0)
        projectStatus(formdata).then(res => {
          this.$notification.success({
            title: 'Success',
            message: '删除成功'
          })
          this.getTableData()
        })
        .catch(err => {
          this.$notification.error({
            title: err.code,
            message: err.message
          })
        })
      }
    },
    // 前端分页
    handlePageChange (pagination) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      // console.log(pagination)
      this.dataSource = JSON.parse(JSON.stringify(this.originalData))
      this.dataSource = this.dataSource.slice((this.pagination.current - 1) * this.pagination.pageSize, this.pagination.current * this.pagination.pageSize)
      // console.log(this.dataSource)
    }
  }
}
</script>

<style lang="less" scoped>
  .custom-tree {

    /deep/ .ant-menu-item-group-title {
      position: relative;
      &:hover {
        .btn {
          display: block;
        }
      }
    }

    /deep/ .ant-menu-item {
      &:hover {
        .btn {
          display: block;
        }
      }
    }

    /deep/ .btn {
      display: none;
      position: absolute;
      top: 0;
      right: 10px;
      width: 20px;
      height: 40px;
      line-height: 40px;
      z-index: 1050;

      &:hover {
        transform: scale(1.2);
        transition: 0.5s all;
      }
    }
  }
  .turnSmall{
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s;
    position: relative;
    top: -10px;
  }
  .turnSmall:hover {
    color: #33AAFF;
    background-color: #F0F2F5;
  }
  // /deep/ .ant-modal-content{
  //   width: 180%;
  //   left: -36%;
  // }
@media screen and (max-width: 500px) {
  /deep/ .ant-modal-content {
    width: 100%;
    left: 0%;
  }
}
.highlight {
  background-color: rgb(255, 192, 105);
  padding: 0px;
}
// .pro /deep/ .ant-col-5 {
//   width:10%;
// }
.pro /deep/ .ant-form-item-label {
  width:20%;
}
.warn {
  color: red;
  text-align:center;
}
.pru /deep/ .ant-col-18 {
  width:55%;
}
.pru /deep/ .ant-form-item-label {
  width:42%;
}
/* tile uploaded pictures */
.upload-list-inline :deep(.ant-upload-list-item) {
  float: left;
  width: 200px;
  margin-right: 8px;
}
.upload-list-inline [class*='-upload-list-rtl'] :deep(.ant-upload-list-item) {
  float: right;
}
</style>
